<template>
  <div class="com-topnav">
    <section class="left">
      <i
        :class="['iconfont', isopen ? 'icon-shousuo' : 'icon-shousuo5']"
        @click="hideSidebar"
      ></i>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ name: 'index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ one }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ two }}</el-breadcrumb-item>
      </el-breadcrumb>
    </section>
    <section class="right">
      <div class="search">
        <input type="text" v-show="0" />
        <i class="iconfont icon-chazhaocopy"></i>
      </div>
      <div class="enlager">
        <i
          :class="[
            'iconfont',
            fullscreen ? 'icon-fullscreen-exit' : 'icon-pingmu_quanping',
          ]"
          @click="fullScreen()"
        ></i>
      </div>
      <!-- vue click.stop阻止点击事件继续传播 -->
      <div class="userinfo" @click.stop="showdrop">
        <img src="/static/image/avatar_user.jpg" alt="" />
        <ul class="dropdown-con" v-if="dropdownVisible">
          <li class="ul-item">个人中心</li>
          <li class="ul-item">
            <router-link to="/welcome">首页</router-link>
          </li>
          <a href="https://gitee.com/echoc/admin-vue/" target="_blank">
            <li class="ul-item">项目地址</li>
          </a>
          <li @click="logout" class="ul-item">退出登录</li>
        </ul>
      </div>
      <i
        class="iconfont icon-xitongxiala down"
        @click="showdrop"
        @click.stop=""
      ></i>
    </section>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  components: {},
  props: ["dropdownVisible", "menupath", "isopen"],
  data() {
    return {
      menuObj: {
        users: ["用户管理", "用户列表"],
        goods: ["商品管理", "商品列表"],
        roles: ["权限管理", "权限列表"],
        rights: ["权限管理", "角色列表"],
        params: ["商品管理", "分类参数"],
        categories: ["商品管理", "商品分类"],
        orders: ["订单管理", "订单列表"],
        reports: ["数据统计", "数据报表"],
        addgood: ["商品管理", "商品列表", "增加商品"],
      },
      fullscreen: false,
      visible: false,
    };
  },
  watch: {},
  computed: {
    one() {
      if (!this.menuObj[this.menupath]) {
        return;
      } else {
        return this.menuObj[this.menupath][0];
      }
    },
    two() {
      if (!this.menuObj[this.menupath]) {
        return;
      } else {
        return this.menuObj[this.menupath][1];
      }
    },
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    hideSidebar() {
      this.$emit("hideSidebar");
    },
    showdrop() {
      this.$emit("showdrop");
    },
    // 点击全屏展示
    fullScreen() {
      console.log(this.fullscreen);
      this.fullscreen = !this.fullscreen;
      if (!screenfull.isEnabled) {
        this.$message({
          message: "you browser can not work",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
.com-topnav {
  display: flex;
  line-height: 56px;
  width: 100%;
  height: 56px;
  padding: 0 10px;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  .left,
  .right {
    display: flex;
    align-items: center;
  }
  .left {
    i {
      font-size: 20px;
      margin-right: 20px;
    }
    .el-breadcrumb {
      line-height: 56px;
      vertical-align: center;
    }
  }
  .right {
    margin-right: 2px;
    .search {
      margin-right: 10px;
      position: relative;
      input {
        vertical-align: center;
      }
      i {
        position: absolute;
        top: -28px;
        right: 0px;
      }
    }
    .enlager {
      vertical-align: top;
      margin-right: 10px;
    }
    .userinfo {
      background-color: #fff;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  i {
    font-size: 20px;
    font-weight: 700;
  }
}
.down {
  font-size: 4px !important;
  margin-left: 2px;
  color: #757b8c;
}
.dropdown-con li {
  cursor: pointer;
  text-align: center;
  color: #606266;
}
.dropdown-con li:hover {
  background-color: #e8f4ff;
  color: #46a6ff;
}
.ul-item:last-child {
  border-top: 1px solid #e6ebf5;
}
.dropdown-con {
  display: block;
  position: absolute;
  top: 56px;
  right: 10px;
  z-index: 999;
  background-color: #fff;
  min-width: 90px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  transition: all 2s;
}
.icon-shousuo5 {
  font-size: 22px !important;
}
</style>